<template>
  <el-card class="card-carouel">
    <div slot="header" class="clearfix">
    	<slot name="title">
	      <span>{{ title }}</span>
	      <ul class="card-right-action" v-if="cardCarouelLength > 1">
	        <li class="item" v-for="(item, index) in cardCarouelLength" :class="{'active': active == index}" :key="index" @mouseenter="setCarouelsAction(index)"></li>
	      </ul>
      </slot>
    </div>
    <el-carousel :autoplay="false" :height="height" arrow="never" ref="cardCarouel" indicator-position="none" class="clearfix">
      <slot name="content">
      	<h1>测试数据</h1>
      </slot>
    </el-carousel>
  </el-card>
</template>

<script>

export default {
  name: 'CardCarouel',
  props: {
    title: {
      default: '卡片标题'
    },
    height: {
      type: String,
      default: '180px'
    }
  },
  data() {
    return {
      cardCarouelLength: 1,
      active: 0
    }
  },
  mounted() {
    this.cardCarouelLength = this.$refs.cardCarouel.$children.length
  },
  methods: {
    setCarouelsAction(index) {
      this.active = index
      this.$refs.cardCarouel.setActiveItem(index)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$cardHeaderHeight: 43px;
$cardHeaderPadding: ($cardHeaderHeight - 16px) /2;

.card-carouel{
	position: relative;
	.card-right-action{
	  list-style: none;
	  position: absolute;
	  right: $cardHeaderPadding;
	  top: 0;
	  .item{
	    display: inline-block;
	    width: 10px;
	    height: 10px;
	    border-radius: 50%;
	    margin-left: 5px;
	    cursor: pointer;
	    background-color: #E2E2E2;
	    &.active{
	      background-color: #999;
	    }
	  }
	}
}
</style>

<style rel="stylesheet/scss" lang="scss">
$cardHeaderHeight: 43px;
$cardHeaderPadding: ($cardHeaderHeight - 16px) /2;

.card-carouel{
	.el-card__header{
	  color: #333;
	  font-size: 14px;
	  line-height: 14px;
	  padding: $cardHeaderPadding;
	}
	.el-card__body{
	  padding: $cardHeaderPadding;
	  .el-carousel__container{
	  	height: 175px;
	  }
	}
}
</style>
